<template>
  <div>
    <h3>Welcome!</h3>
    <div>
      <el-button @click="isShow = true">显示test组件</el-button>
      <el-button @click="isShow = false">隐藏test组件</el-button>
      <test :show.sync="isShow"></test>
      <test :show="isShow" @update:show="isShow = $event"></test>
    </div>
  </div>
</template>

<script>
import Test from './Test'
export default {
  data() {
    return {
      name: 'lst',
      isShow: false
    }
  },
  components: { Test }
  // computed: {
  //   computedName() {
  //     return this.name + ' computed '
  //   }
  // },
  // // 测试生命钩子函数
  // beforeCreate() {
  //   alert(`beforeCreate
  //         + 'this.name:' + ${this.name}
  //         + 'this.computedName:' + ${this.computedName}
  //         `)
  // },
  // created() {
  //   alert(`created
  //         + 'this.name:' + ${this.name}
  //         + 'this.computedName:' + ${this.computedName}
  //         `)
  // },
  // beforeMount() {
  //   alert('beforeMount')
  // },
  // mounted() {
  //   alert('mounted 页面在这之后加载出来')
  // }
}
</script>
